<template>
  <div class="dashboard-container">
    <!-- 自定义右键菜单 -->
    <div class="contextmenu-wrapper">
      <div
        class="contextmenu-content"
        @contextmenu.prevent.stop="handleContextmenu"
      >
        右键点击区域
      </div>
      <contextmenu ref="contextmenu" :menu-type="menuType" />
    </div>
    <!-- 自定义对话框  -->
    <div class="dialog-wrapper">
      <el-button type="primary" @click="handleShowDialog">自定义弹窗</el-button>
      <customDialog :visible.sync="isShowDialog"></customDialog>
    </div>
    <!-- 自定义事件选择器 -->
    <div class="timePicker-wrapper">
      <el-time-picker
        v-model="timePicker"
        value-format="HH:mm"
        format="HH:mm"
        :picker-options="{
          selectableRange: '00:00:00 - 48:00:00'
        }"
        placeholder="任意时间点"
      >
      </el-time-picker>
    </div>
    <!-- 自定义选择器 -->
    <div class="select-wrapper">
      <cascaderPopover></cascaderPopover>
    </div>
  </div>
</template>

<script>
import Contextmenu from "@/components/Contextmenu";
import CustomDialog from "@/components/CustomDialog";
import CascaderPopover from "@/components/CascaderPopover";

export default {
  name: "Dashboard",
  components: { Contextmenu, CustomDialog, CascaderPopover },
  data() {
    return {
      menuType: [
        {
          text: "复制",
          disabled: false
        },
        {
          text: "粘贴",
          disabled: true
        }
      ],
      isShowDialog: false,
      timePicker: "",
      selectDevice: ""
    };
  },
  methods: {
    handleContextmenu() {
      this.$refs.contextmenu.$children[0].open();
    },
    handleShowDialog() {
      this.isShowDialog = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  .contextmenu-wrapper {
    .contextmenu-content {
      text-align: center;
      margin: 0 auto;
      width: 800px;
      height: 200px;
      line-height: 200px;
      border: 1px dashed #000;
    }
  }

  .dialog-wrapper {
    width: 800px;
    text-align: center;
    margin: 0 auto;
  }

  .select-wrapper {
    
  }
}
</style>
